<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>南太湖电力科技驾驶舱</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="../css/style_th.css" />
    <link rel="stylesheet" href="../css/style_th2.css" />
    <!-- <script src="../js/vue.min.js"></script> -->
    <!-- <script src="../js/jquery.min.js"></script> -->
    <!-- <script src="../js/echarts.min.js"></script> -->
    <!-- <script src="../js/moment.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

    <!-- element Ui -->
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--接口-->
    <!-- <script src="../js/axios.min.js"></script> -->
    <script src="../js/request.js"></script>
    <script src="../js/api.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        overflow-x: hidden; /* 强制隐藏水平滚动条 */
        background-color: rgba(0, 0, 0, 1);
      }

      [v-cloak] {
        display: none !important;
      }

      #outerSizeAPosition {
        width: 100%;
        height: 67.5rem;
        /*background-image: url(img/main-bg.png);*/
        /*background-repeat: no-repeat;*/
        /*background-position: center center;*/
        /*background-size: cover;*/
        background-color: rgba(0, 0, 0, 1);
        overflow-x: hidden;
        overflow-y: auto;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        position: relative;
        display: flex;
      }
      #outerSizeAPosition2 {
        width: 100%;
        min-width: 1920px; /* 最小宽度保证内容不压缩 */
      }
      /*// 滚动条样式 开始*/
      ::-webkit-scrollbar-track-piece {
        /*滚动条凹槽的颜色，还可以设置边框属性*/
        background-color: #191925;
      }

      ::-webkit-scrollbar {
        /*滚动条的宽度*/
        width: 9px;
        height: 9px;
      }

      ::-webkit-scrollbar-thumb {
        /*滚动条的设置*/
        background-color: rgba(8, 64, 80, 0.5);
        background-clip: padding-box;
        min-height: 28px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(8, 64, 80, 1);
      }
    </style>
  </head>

  <body>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <div id="outerSizeAPosition2">
      <div class="container">
        <div class="headerTitle">南太湖电力科技驾驶舱</div>

        <div class="formBox">
          <!-- <div class="formTitle">南浔区餐饮油烟智慧监管平台</div> -->
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            class="login_form"
          >
            <el-form-item prop="username">
              <div class="inputTitle">账号：</div>
              <el-input
                class="elInputStyle"
                type=""
                placeholder="请输入账号"
                v-model.number="ruleForm.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <div class="inputTitle">密码：</div>
              <el-input
                class="elInputStyle"
                type="password"
                placeholder="请输入密码"
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-button class="submitBtn" type="primary" @click="submitForm()"
              >登录</el-button
            >
          </el-form>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      let outer = new Vue({
        el: '#outerSizeAPosition2',
        name: 'loginPage',
        props: {},
        components: {},
        data: {
          ruleForm: {
            username: '',
            password: '',
          },
          rules: {
            username: [
              { required: true, message: '请输入账号', trigger: 'blur' },
            ],
            password: [{ required: true, message: '请输入密码' }],
          },
        },
        methods: {
          async submitForm() {
            axios
              .post('http://60.188.49.14/wangneng/webs/login', {
                loginAccount: this.ruleForm.username,
                loginPassword: this.ruleForm.password,
              })
              .then((response) => {
                console.log(response)
                if (response.data.code === 1) {
                  const now = Date.now() // 获取当前时间戳
                  const loginTimeout = 12 * 60 * 60 * 1000 // 设置登录超时时间（1小时，单位为毫秒）

                  localStorage.setItem(
                    'naiTaiHuDianLKJ_token',
                    response.data.data.token
                  )
                  localStorage.setItem('naiTaiHuDianLKJ_loginTimestamp', now)
                  localStorage.setItem(
                    'naiTaiHuDianLKJ_loginTimeout',
                    loginTimeout
                  )

                  window.location.href = '../index.html'
                } else {
                  this.$message.error(response.data.msg)
                }
              })
              .catch((error) => {
                console.error('Error:', error)
              })
          },
        },
      })
    </script>
  </body>
</html>
